<template>
  <el-dialog width="66%" title="选择档案盒" v-model="dialogVisible" modal @close="closeDialog" draggable
    :close-on-click-modal="false" :append-to-body="true">
    <el-form :inline="true" :model="queryParam" class="demo-form-inline" size="medium">
      <el-form-item label="盒号/盒名">
        <el-input v-model="queryParam.boxNoOrName" placeholder="请输入盒号或盒名" clearable></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
    </el-form>
    <!-- </el-col> -->
    <el-row :gutter="24">
      <el-col :span="24">
        <el-button type="primary" size="mini" @click="handleAdd">建盒</el-button>
      </el-col>
    </el-row>
    <el-table :data="tableData" border style="width: 100%" height="30vh">
      <el-table-column width="50" align="center" label="选择">
        <template #default="scope">
          <el-radio :label="scope.row" v-model="boxInfo">{{ '' }}</el-radio>
        </template>
      </el-table-column>
      <el-table-column v-for="item of tableProps" :key="item.props" :prop="item.prop" :label="item.title"
        :width="item.width">
        <template #default="scope">
          <div v-if="item.prop === 'archivesNum'">
            <el-button link size="mini" @click="archivesByBoxNo(scope.row)">{{
              scope.row[item.prop]
            }}</el-button>
          </div>
          <div v-else-if="item.prop === 'stageStatus'">
            <el-tag v-show="scope.row.stageStatus == 0">未上架</el-tag>
            <el-tag v-show="scope.row.stageStatus == 1" type="success">已上架</el-tag>
            <el-tag v-show="scope.row.stageStatus == 2" type="danger">已下架</el-tag>
          </div>
          <div v-else-if="item.prop === 'storeStatus'">
            <el-tag v-show="scope.row.storeStatus == 0">未入库</el-tag>
            <el-tag v-show="scope.row.storeStatus == 1" type="success">在库</el-tag>
            <el-tag v-show="scope.row.storeStatus == 2" type="danger">离库</el-tag>
          </div>
          <div v-else>{{ scope.row[item.prop] }}</div>
        </template>
      </el-table-column>
    </el-table>
    <pagination ref="pagination" style="margin-top: 10px" :totalCount="totalCount" @pagination="pagination">
    </pagination>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false" size="mini">取 消</el-button>
      <el-button type="primary" @click="submitForm" size="mini">确 认</el-button>
    </div>
    <new-box-dialog ref="newBoxDialog" @ok="loadData"></new-box-dialog>
    <archives-by-box-no ref="archivesByBoxNo"></archives-by-box-no>
  </el-dialog>
</template>

<script>
import { boxingPage, singleBoxing } from '@/api/rfid/label'
import newBoxDialog from './newBoxDialog.vue'
import archivesByBoxNo from './archivesByBoxNo.vue'
export default {
  name: 'chooseBoxDialog',
  components: { newBoxDialog, archivesByBoxNo },
  data() {
    return {
      type: '',
      dialogVisible: false,
      tableData: [],
      totalCount: 0, //总数
      //查询条件
      searchModel: {
        pageNo: 1,
        pageSize: 10,
      },
      labelId: '',
      boxInfo: {},
      boxNo: '',
      selection: {},
      queryParam: {},
      tableProps: [
        { title: '盒号', prop: 'boxNo', width: '', checked: true },
        { title: '盒名', prop: 'boxName', width: '', checked: true },
        { title: '盒宽(CM)', prop: 'boxWidth', width: '', checked: true },
        { title: '库位', prop: 'positionName', width: '', checked: true },
        { title: '上架状态', prop: 'stageStatus', width: '', checked: true },
        { title: '在库状态', prop: 'storeStatus', width: '', checked: true },
        { title: '份数', prop: 'archivesNum', width: '', checked: true },
      ],
    }
  },
  methods: {
    init(type, labelId) {
      this.type = type
      this.labelId = labelId
      this.boxInfo = {}
      this.dialogVisible = true
      this.loadData()
    },
    handleAdd() {
      this.$refs.newBoxDialog.add()
    },
    onSubmit() {
      this.$refs.pagination.resetPagination()
    },
    pagination(val) {
      this.searchModel.pageNo = val.page
      this.searchModel.pageSize = val.limit
      this.loadData()
    },
    loadData() {
      const param = Object.assign(this.queryParam, this.searchModel)
      boxingPage(param)
        .then((res) => {
          if (res.data.code === 200) {
            this.tableData = res.data.data.records
            this.totalCount = res.data.data.total
          } else {
            this.$message.error(res.data.message)
          }
        })
        .catch((err) => {
          this.$message.error(err)
        })
    },
    submitForm() {
      if (Object.keys(this.boxInfo).length === 0) {
        this.$message.warning('请选择档案盒')
        return
      }
      if (this.type === 'single') {
        var param = {
          boxNo: this.boxInfo.boxNo,
          labelId: this.labelId,
        }
        singleBoxing(param)
          .then((res) => {
            if (res.data.code === 200) {
              this.$message.success('装盒成功')
              this.$emit('ok')
              this.closeDialog()
            } else {
              this.$message.warning(res.data.message)
            }
          })
          .catch((err) => {
            this.$message.error(err)
          })
      } else if (this.type === 'batch') {
        this.$emit('ok', this.boxInfo)
        this.closeDialog()
      }
    },
    archivesByBoxNo(row) {
      this.$refs.archivesByBoxNo.init(row)
    },
    closeDialog() {
      this.dialogVisible = false
      this.boxNo = ''
    },
  },
}
</script>

<style scoped></style>
